﻿<UserControl x:Class="ScrollUICover"
             x:ClassModifier="Friend"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="50" 
             d:DesignWidth="50" 
             xmlns:my="clr-namespace:System;assembly=mscorlib" SnapsToDevicePixels="False">
    <UserControl.Resources>
        <SolidColorBrush x:Key="FillColour">Black</SolidColorBrush>
        <SolidColorBrush x:Key="StrokeColour">#FF454545</SolidColorBrush>

        <my:Double x:Key="ChevronWidth">6</my:Double>
        <my:Double x:Key="ChevronHeight">8</my:Double>
        <Style x:Key="ChevronStyle" TargetType="Polygon">
            <Setter Property="Fill" Value="{StaticResource FillColour}" />
            <Setter Property="Stroke" Value="{StaticResource StrokeColour}" />
            <Setter Property="Points">
                <Setter.Value>
                    <PointCollection>
                        <Point X="3" Y="4"/>
                        <Point X="6" Y="8"/>
                        <Point X="0" Y="8"/>
                    </PointCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="BackgroundGrid"
          ClipToBounds="True"
          Opacity="0.8">
        <Canvas>
            <Grid x:Name="ScrollerThing"
                  Canvas.Left="10"
                  Canvas.Top="10"
                  Visibility="Hidden"
                  Width="30" Height="30">
                
                <!-- Cheesy (easy to render) drop shadow -->
                <Ellipse Fill="Gray" Opacity="0.3" Margin="1,1,-1,-1" />
                
                <!-- Main circle background -->
                <Ellipse Fill="White" Stroke="Gray" />

                <!-- Top arrow -->
                <Canvas VerticalAlignment="Top" Width="{StaticResource ChevronWidth}">
                    <Polygon Style="{StaticResource ChevronStyle}" />
                </Canvas>
                
                <!-- Left arrow -->
                <Canvas HorizontalAlignment="Left" Height="{StaticResource ChevronHeight}">
                    <Polygon Style="{StaticResource ChevronStyle}">
                        <Polygon.LayoutTransform>
                            <RotateTransform Angle="270" />
                        </Polygon.LayoutTransform>
                    </Polygon>
                </Canvas>
                
                <!-- Right arrow -->
                <Canvas HorizontalAlignment="Right" Width="{StaticResource ChevronHeight}" Height="{StaticResource ChevronWidth}">
                    <Polygon Style="{StaticResource ChevronStyle}">
                        <Polygon.LayoutTransform>
                            <RotateTransform Angle="90" />
                        </Polygon.LayoutTransform>
                    </Polygon>
                </Canvas>

                <!-- Bottom arrow -->
                <Canvas VerticalAlignment="Bottom" Width="{StaticResource ChevronHeight}" Height="{StaticResource ChevronHeight}">
                    <Polygon Style="{StaticResource ChevronStyle}">
                        <Polygon.LayoutTransform>
                            <RotateTransform Angle="180" />
                        </Polygon.LayoutTransform>
                    </Polygon>
                </Canvas>

                <!-- Center dot -->
                <Ellipse Width="5" Height="5" Fill="{StaticResource FillColour}" Stroke="{StaticResource StrokeColour}" />
            </Grid>
        </Canvas>
    </Grid>
</UserControl>